import React from 'react';
import { Card, Typography, Button, Space, Empty } from 'antd';
import { SettingOutlined, SaveOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const Settings = () => {
  return (
    <div style={{ padding: '24px', background: '#f7f8fa', minHeight: '100%' }}>
      <div style={{ marginBottom: '24px' }}>
        <Title level={2} style={{ margin: 0, color: '#1d2129', fontSize: '24px' }}>
          系统设置
        </Title>
        <Paragraph style={{ margin: '8px 0 0 0', color: '#86909c' }}>
          配置系统参数和用户偏好
        </Paragraph>
      </div>

      <Card 
        style={{ 
          borderRadius: '8px',
          border: '1px solid #f0f0f0',
          boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
          textAlign: 'center',
          padding: '60px 20px'
        }}
      >
        <Empty
          image={<SettingOutlined style={{ fontSize: '64px', color: '#1677ff' }} />}
          description={
            <div>
              <Title level={3} style={{ color: '#1d2129', marginBottom: '8px' }}>
                系统设置功能
              </Title>
              <Paragraph style={{ color: '#86909c', marginBottom: '24px' }}>
                此功能正在开发中，敬请期待
              </Paragraph>
            </div>
          }
        >
          <Space>
            <Button type="primary" icon={<SaveOutlined />}>
              保存设置
            </Button>
            <Button>
              重置默认
            </Button>
          </Space>
        </Empty>
      </Card>
    </div>
  );
};

export default Settings;